<!DOCTYPE html>
<html lang="en" style="font-size:62.5%">
<head>
  <meta charset="utf-8">
  <title>欢瑞世纪影视传媒</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/public.css">
  <link rel="stylesheet" href="css/p-item.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="js/swiper-04.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/public.js"></script>
  <script src="js/jquery.min.js"></script>
  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-container{
      left:0;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-container-BG{
      z-index: 999;
      background-color: transparent;
    }
    .swiper-container-bg .swiper-slide{
      width: 100%!important;
      height: 100%!important;
    }
   .swiper-container-v .slide-v{
      background-image: linear-gradient(-180deg, rgba(255,61,127,0.80) 0%, #7295F4 98%);
    }

    .swiper-container-top .swiper-slide{
      width: 80%;
    }
    .swiper-container-bottom .swiper-slide{
      width: 70%;
    }
    .swiper-container-top{
      height: 8%;
      top:2.946rem;
      background-color: transparent;
      z-index: 77;
    }
    .swiper-container-bottom{
      height: 80%;
      top:4.4914rem;
      background-color: transparent;
      z-index: 88;
    }
    .swiper-container-bg{
      height:100%;
      background-color: transparent;
      z-index: 1;
    }
    .swiper-container-bg .bg-img{
      width: 100%;
      height: 100%;
    }
    .swiper-container-bg {
      height: 100%;
      background-color: transparent;
      z-index: 1;
    }

    .swiper-container-bg .bg-img {
      width: 100%;
      height: 100%;
    }

    .swiper-container-bg img {
      width: 100%;
      height: auto;
      opacity: .1;
    }
    .swiper-container-bg-s img {
      width: 100%;
      height: 100%;
      opacity: .2;
    }
  </style>
</head>
<body>
<!-- Swiper -->
<!--音乐播放-->
<audio src="haha.mp3" controls="controls" preload id="music1" autoplay hidden style="display: none">
</audio>
<span id="bf" class="play-btn" onclick="bf();"></span>
<div class="swiper-container swiper-container-v">
  <div class="swiper-wrapper">
    <!--第一页-->
    <div data-hash="slide-h1" class="swiper-slide slide-v">
      <div class="img-bg" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%"><img src="images/company.jpeg" alt="" style="width:100%;opacity: .1"></div>
      <!--头部和尾部-->
      <img src="images/begin_round@3x.png" class="ani resize" style="width:2.8rem;height:4.2rem;left:0px;top:-1.8rem;z-index:3;" swiper-animate-effect="slideInLeft" swiper-animate-duration=".5s" swiper-animate-delay="0.5s"  >
      <img src="images/begin_point_up@3x.png" class="ani resize" style="width:13.2rem;height:2.2rem;left:2.2rem;top:.8rem;z-index:2;" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0"  >
      <img src="images/begin_point_down@3x.png"  class="ani resize" style="width:11rem;height:2.2rem;left:.5rem;bottom: .6rem;z-index:1;" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0"  >
      <img src="images/begin_biground@3x.png"  class="ani resize" style="width:5rem;height:4.8rem;right: 0;bottom: 0;z-index:1;" swiper-animate-effect="slideInRight" swiper-animate-duration="0.5s" swiper-animate-delay=".5s"  >

      <!--中间-->
      <img src="images/begin_triangle@3x.png"  class="ani resize" alt="" style="width: 14.8rem;height: 12rem;left: .6rem;top: 6.8rem;"  swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay=".5s" >
      <img src="images/iPhone%207@3x.png"  class="ani resize" alt="" style="width: 100%;height: 13rem;left: 0;top: 6.8rem;"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s" >
      <p class="b-txt ani resize" style="width:12.2rem;left: 1.9rem;top: 9.2rem;"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s" >欢瑞世纪</p>
      <p class="s-txt ani resize" style="width:9rem;left:3.5rem;top: 12.6rem;"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s" >影视传媒</p>
      <div class="about-txt ani resize nexts-btn" style="width:6rem;height:2.4rem;left: 5rem;top: 18rem;" swiper-animate-effect=" fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
        <p  style="color: #fff;" class="about-us-btn ">
          <span class="resize" id="about-us" style="font-size: .75rem;">认识我们 </span>
          <img src="images/arrow.png" style="width:.6rem;height:.6rem; top:.8rem; right:1rem;" id="array-left">
        </p>
      </div>
      <div class="n" style="display: none"></div>
      <div class="ani b-yuan" style="width: 4.6rem;height: 4.6rem; border-radius: 50%;left: 50%;margin-left:-2.3rem;top: 4.5rem;"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s" >
        <img src="images/logo-b.png" alt="" style="width: 100%;height: 100%">
      </div>
    </div>
    <!--第二页-->
    <div data-hash="slide-h2" class="swiper-slide slide-v">
      <div class="company">
        <span class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration=".5s" swiper-animate-delay="0.6s"></span>
        <label class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="0.7s">签约艺人</label>
      </div>
      <div class="swiper-container swiper-container-BG swiper-container-h ani" swiper-animate-effect="slideInRight" swiper-animate-duration=".5s" swiper-animate-delay=".5s">
        <div class="swiper-wrapper p-box">

        </div>
        <div class="swiper-pagination swiper-pagination-h"></div>
      </div>
      <div class="swiper-container swiper-container-bg  ani" swiper-animate-effect="slideInRight" swiper-animate-duration=".5s" swiper-animate-delay=".2s">
        <div class="swiper-wrapper bg-img-list">

        </div>
        <div class="swiper-pagination swiper-pagination-h"></div>
      </div>
      <a class="next-page ani nexts-btn" swiper-animate-effect="slideInRight" swiper-animate-duration=".5s" swiper-animate-delay=".2s" >
        <img src="images/stars_icon_next@3x.png" style="width:20px;height:20px;" id="array" class="resize">
        <span style="color: #fff;margin-left: 10px;font-size: .6rem;float: left;">公司作品</span>
      </a>
    </div>
    <!--第三页-->
    <div data-hash="slide-h3" class="swiper-slide  slide-v slide-s" style="background-color: transparent">

      <div class="company">
        <span class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration=".5s"
              swiper-animate-delay="0.6s"></span>
        <label class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s"
               swiper-animate-delay="0.7s">影视作品</label>
      </div>
      <div class="swiper-container swiper-container-top ani" swiper-animate-effect="slideInRight" swiper-animate-duration=".5s" swiper-animate-delay=".5s">
        <div class="swiper-wrapper date-list">


        </div>
      </div>
      <div class="swiper-container swiper-container-bottom  ani" swiper-animate-effect="slideInRight" swiper-animate-duration=".5s" swiper-animate-delay=".3s">
        <div class="swiper-wrapper tv-list">

        </div>
      </div>
      <div class="swiper-container swiper-container-bg-s ani" swiper-animate-effect="slideInRight" swiper-animate-duration=".5s" swiper-animate-delay=".1s">
        <div class="swiper-wrapper tv-bg-list" >


        </div>
      </div>
      <a class="next-page ani nexts-btn" swiper-animate-effect="slideInRight" swiper-animate-duration=".5s" swiper-animate-delay=".2s" >
        <img src="images/stars_icon_next@3x.png" style="width:20px;height:20px;" id="array" class="resize">
        <span style="color: #fff;margin-left: 10px;font-size: .6rem;float: left;">公司简介</span>
      </a>
    </div>
    <!--第四页-->
    <div data-hash="slide-h4" class="swiper-slide swiper-slide1 slide-v slide-last">
       <div class="img-bg ani" swiper-animate-effect="slideInUp" swiper-animate-duration=".5s" swiper-animate-delay="0.5s">
         <img src="images/company.jpeg" alt="" style="width:100%;opacity: .1;height: 100%;">
       </div>
      <div class="view" style="width: 100%;  height: 100%;  position: relative; ">
        <div class="company">
          <span class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration=".5s" swiper-animate-delay="0.5s"></span>
          <label class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="0.7s">公司介绍</label>
        </div>
        <div class="ani logo" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="1s">
          <img src="images/logo-b.jpg" />
        </div>
        <div class="ani line-f" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="1.15s">
          <p></p>
        </div>
        <div class="words">
          <div class="ani mybox" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="1.2s"></div>
          <div class="ani boxbg" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="1.4s"></div>
          <p class="ani word" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.5s">欢瑞世纪影视传媒股份有限公司注册成立于2006年，是一家致力于电影电视剧投资、制作、发行以及相关产业发展的公司。“品质是最好的表达”一直是公司制作的原则。</p>
        </div>
        <div class="contact">
          <div class="ani line-e" style="top: 14rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2s"></div>
        </div>
        <div class="contain">
          <div class="ani workbox" style="top: 14.9rem;" swiper-animate-effect="bounceIn" swiper-animate-duration=".5s" swiper-animate-delay="2.5s"></div>
          <p class="ani single" style=" top: 15.1rem; left: 6.5rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.55s">联</p>
          <p class="ani single" style="top: 15.1rem;left: 7.3rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.6s">系</p>
          <p class="ani single" style="top: 15.1rem;left: 8.1rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.65s">我</p>
          <p class="ani single" style="top: 15.1rem;left: 8.9rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.7s">们</p>
        </div>
        <div class="ani line-t" style="top: 16.1rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.8s"></div>
        <div class="address">
          <div class="ani placebox" style="top:17rem;height: 5rem;" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay="2.9s"></div>
          <div class="icon ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="3.5s">
            <img src="images/profile_icon_location@3x.png" />
          </div>
          <p class="ani msg" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay="3.6s">地址：北京市朝阳区光华路4号东方梅地亚中心a座27层</p>
          <div class="icon ani" style="top: 19.5rem;" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="3.7s">
            <img src="images/profile_icon_phone@3x.png" />
          </div>
          <p class="ani msg" style="top: 19.5rem;" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay="3.8s">电话：010-8571 8098</p>
          <div class="icon ani" style="top: 20.7rem;" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="3.9s">
            <img src="images/profile_icon_message@3x.png" />
          </div>
          <p class="ani msg" style="top: 20.7rem;" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay="4s">传真：010-8571 8098-8801</p>
        </div>
        <p class="ani footer" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="4.5s">Powered by</p>
        <p class="ani footer" style="left: 8.2rem;" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay="4.55s">娱丸APP</p>
      </div>
    </div>
  </div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>

  //过了几秒后滚动
 /* var timer;
  function demoProcess() {
    $('.view').animate({
      scrollTop: '500px'
    }, 800);
	  $('.slide-last').addClass('stop-swiping');
  }*/
  var swiperV = new Swiper('.swiper-container-v', {
    direction: 'vertical',
    spaceBetween: 0,
    centeredSlides: true,
    noSwiping : true,
    noSwipingClass : 'stop-swiping',
    hashnav:true,
    nextButton:'.nexts-btn',
    lazy: {
      loadPrevNext: true,
      loadPrevNextAmount: 1
    },
    onSlideChangeStart: function (swiper) {
     /* var audio = document.getElementById('music1');
      if (swiper.activeIndex == 2) {
        audio.play();
        $('#bf').css('backgroundImage','url("images/h5_icon_music@3x.png")').addClass('play-btn')
      } else {
        audio.pause();// 这个就是暂停
      }*/
    },
//  mousewheelControl : true,
    onInit: function(swiper){
      swiperAnimateCache(swiper);
      swiperAnimate(swiper);
    },
   /* onSlideChangeEnd: function(swiper){
      swiperAnimate(swiper);
      if (swiper.activeIndex == 3) {
      	timer = setTimeout(demoProcess, 5000);
	      $('.view').addClass('scrollop');
      } else {
      	clearTimeout(timer);
      	$('.view').removeClass('scrollop');
      	return;
      }
    },*/
    onTransitionEnd: function(swiper){
      swiperAnimate(swiper);
    }

  });

  /**/
 var swiperBG = new Swiper('.swiper-container-bg', {
   pagination: {
     el: '.swiper-container-bg',
     clickable: true
   },
   observer:true,
   slidesPerView: 'auto',
   centeredSlides: true,
   spaceBetween: 0
 });
  var swiperH = new Swiper('.swiper-container-h', {
    pagination: {
      el: '.swiper-pagination-h',
      clickable: true
    },
    slidesPerView: 1.4
    ,
    spaceBetween: 25,
    centeredSlides: true,
    observer:true,
    runCallbacksOnInit : true,
    control: [ swiperBG],

    onInit: function(swiper){
      $.ajax({
        url:'data/star.json',
        type:'get',
        dataType:'json',
        timeout:'3000',
        cache:'false',
        async:false,
        error: erryFunction,
        success: succFunction
      });
      function erryFunction() {

      }
      function succFunction(data) {
        for(var i = 0; i <= 26 ; i++){
          var newdate = new Date(data[i].birthDate);
          var str="";
          str+=newdate.getYear()+"/";
          str+=(newdate.getMonth()+1)+"/";
          str+=newdate.getDate();
          var html = ' <div class="swiper-slide swiper-slide-p">' +
            '<a href="http://www.yuwantop.com/star.html?id='+data[i].id+'">'+
            '<div class="p-item-box">'+
            '<div class="p-img-box"><img src="'+data[i].avatar+'" alt=""></div>'+
            '<div class="p-txt-box">'+
            '<p class="t"><em>'+data[i].name +'</em></p>'+
            '<p class="p-detail">个人简介： <em>'+data[i].description+'</em></p></div></div></a> </div>'
          $('.p-box').append(html);

          var bg_img = '<div class="swiper-slide bg-img-box"><div class="bg-img"> <img src="'+data[i].avatar+'" alt=""> </div> </div>';
          $('.bg-img-list').append(bg_img);
        }
      }
    },
    onSlideChangeStart: function (swiper) {
      if (swiper.activeIndex != 0) {
        $('.p-box .swiper-slide-p:first-child .p-item-box').css({'left':0})
      } else {
        $('.p-box .swiper-slide-p:first-child .p-item-box').css({'left':'-.7rem'})
      }
    }
  });


  /*第三页*/
  var swiperT = new Swiper('.swiper-container-top', {
    pagination: {
      el: '.swiper-container-top',
      clickable: true,
    },
    slidesPerView: 'auto',
    observer:true,
    centeredSlides: true,
    spaceBetween: 0,
    onInit: function(swiper){
      $.ajax({
        url:'data/tv.json',
        type:'get',
        dataType:'json',
        timeout:'3000',
        cache:'false',
        error: erryFunction,
        success: succFunction
      });
      function erryFunction() {

      }
      function succFunction(data) {
        for(var i = 0; i <= 9 ; i++){
          var newdate = new Date(data[i].detail.tv.publishTimeStr);
          var strs="";
          strs+=newdate.getYear()+"/";
          strs+=(newdate.getMonth()+1)+"/";
          strs+=newdate.getDate();
          strs = strs.substr(1);
          var date_html = ' <div class="swiper-slide swiper-wrapper-f">'+
            '<div class="date-box">'+
            '<div class="sm-box">'+
            '<p class="date">'+data[i].detail.tv.publishTimeStr+'</p>'+
            '<div class="point"><p></p></div>'+
            '</div>'+
            '</div>'+
            '</div>';
          $('.date-list').append(date_html);

          var tv_html = ' <div class="swiper-slide ds-box">'+
            '<a href="http://www.yuwantop.com/detail/tv.html?id='+ data[i].id+'">'+
            '<div class="ds-item">'+
            '<div class="ds-img-box"><img src="'+data[i].detail.tv.cover.url+'" alt=""></div>'+
            '<div class="ds-txt-box">'+
            '<p class="ds-t">'+data[i].detail.tv.name+'</p>'+
            '<p class="ds-detail">导演：<em>'+data[i].detail.tv.directors+'</em></p>'+
            '<p class="ds-detail">主演：<em>'+data[i].detail.tv.majorStar+'</em></p>'+
            '<p class="ds-detail">类型：<em>'+data[i].detail.tv.type+'</em></p>'+
            '</div>'+
            '</div>'+
            '</a>'+
            '</div>';

          $('.tv-list').append(tv_html);

          var tv_bg_html = '<div class="swiper-slide" style="height:100%;width:100%;">'+
            '<div class="bg-img" style="height:100%;width:100%;">'+
            '<img src="'+data[i].detail.tv.starItems[0].cover.bg+'" alt="">'+
            '</div>'+
            '</div>';
          $('.tv-bg-list').append(tv_bg_html);
        }
      }
    }
  });
  var swiperBGs = new Swiper('.swiper-container-bg-s', {
    pagination: {
      el: '.swiper-container-bg-s',
      clickable: true
    },
    observer:true,
    slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: 0,
  });

  var SwiperB = new Swiper('.swiper-container-bottom', {
    pagination: {
      el: '.swiper-container-bottom',
      clickable: true
    },
//  parallax: true,
    observer:true,
    slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: 0,
    control: [swiperT, swiperBGs],//控制前面两个Swiper
    onSlideChangeStart: function (swiper) {
      if (swiper.activeIndex != 0) {
        $('.swiper-container-top .swiper-slide').eq(swiper.activeIndex).addClass('active-elem').siblings().removeClass('active-elem');
        $('.ds-box ').eq(swiper.activeIndex).addClass('scale').siblings().removeClass('scale');
        $('.swiper-slide:first-child .ds-img-box').css({
          '-webkit-transform': 'scale(1)',
          '-moz-transform': 'scale(1)',
          'transform': 'scale(1)',
          'left':'0'
        })
      } else {
        $('.swiper-container-top .swiper-slide').eq(1).removeClass('active-elem');
        $('.ds-box ').eq(swiper.activeIndex).addClass('scale').siblings().removeClass('scale');
        $('.swiper-slide:first-child .ds-img-box').css({
          'left':'-.7rem',
          '-webkit-transform': 'scale(1.05)',
          '-moz-transform': 'scale(1.05)',
          'transform': 'scale(1.05)'
        })
      }
    },
   /* onSlideChangeEnd: function (swiper) {
      if (swiper.activeIndex != 0) {
        $('.ds-box ').eq(swiper.activeIndex).addClass('scale').siblings().removeClass('scale');
        $('.swiper-slide:first-child .ds-img-box').css({
         '-webkit-transform': 'scale(1)',
         '-moz-transform': 'scale(1)',
         'transform': 'scale(1)',
        })
      } else {
        $('.ds-box ').eq(swiper.activeIndex).addClass('scale').siblings().removeClass('scale');
        $('.swiper-slide:first-child .ds-img-box').css({
          '-webkit-transform': 'scale(1.07)',
          '-moz-transform': 'scale(1.07)',
          'transform': 'scale(1.07)'
        })
      }
    }*/
  });


  function bf() {
    var audio = document.getElementById('music1');
    if (audio !== null) {
      //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
      if (audio.paused) {
        audio.play();//audio.play();// 这个就是播放
        $('#bf').css('backgroundImage','url("images/h5_icon_music@3x.png")').addClass('play-btn')
      } else {
        audio.pause();// 这个就是暂停
        $('#bf').css('backgroundImage','url("images/h5_icon_music_stop@3x.png")').removeClass('play-btn')
      }
    }
  }
	//针对苹果手机音频不能自动播放的问题解决
	/*(function() {
   function log(info) {
   }
   function forceSafariPlayAudio() {
   audioEl.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效
   audioEl.play(); // iOS 7/8 仅需要 play 一下
   }

   var audioEl = document.getElementById('music1');

   // 可以自动播放时正确的事件顺序是
   // loadstart
   // loadedmetadata
   // loadeddata
   // canplay
   // play
   // playing
   //
   // 不能自动播放时触发的事件是
   // iPhone5  iOS 7.0.6 loadstart
   // iPhone6s iOS 9.1   loadstart -> loadedmetadata -> loadeddata -> canplay
   audioEl.addEventListener('loadstart', function() {
   log('loadstart');
   }, false);
   audioEl.addEventListener('loadeddata', function() {
   log('loadeddata');
   }, false);
   audioEl.addEventListener('loadedmetadata', function() {
   log('loadedmetadata');
   }, false);
   audioEl.addEventListener('canplay', function() {
   log('canplay');
   }, false);
   audioEl.addEventListener('play', function() {
   log('play');
   // 当 audio 能够播放后, 移除这个事件
   window.removeEventListener('touchstart', forceSafariPlayAudio, false);
   }, false);
   audioEl.addEventListener('playing', function() {
   log('playing');
   }, false);
   audioEl.addEventListener('pause', function() {
   log('pause');
   }, false);

   // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
   // 因此我们通过一个用户交互事件来主动 play 一下 audio.
   window.addEventListener('touchstart', forceSafariPlayAudio, false);

   audioEl.src = 'haha.mp3';
   })();*/
  document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
      var audio = document.getElementById('music1');
      audio.play();
      document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
      }, false);
    }
    audioAutoPlay();
  });
	
 /* var lastY;
  $(".view").bind("touchmove", function(e) {
    if ($(this).scrollTop() <= 0) {
      //超出顶部
      $('.slide-last').removeClass('stop-swiping');
      var currentY = e.originalEvent.touches[0].clientY;
      if(currentY > (lastY || 0)){

      }else if(currentY < (lastY || 0)){
        e.stopPropagation();
      }
      lastY = currentY;
    }else if($(this).scrollTop() >= ($(this).children().height() - $(this).height())){
      //超出底部
      $('.slide-last').addClass('stop-swiping');
      var currentY = e.originalEvent.touches[0].clientY;
      if(currentY > (lastY || 0)){
        e.stopPropagation();
      }else if(currentY < (lastY || 0)){

      }
      lastY = currentY;
    }else{
      //在内容区域滑动
      e.stopPropagation();
    }
  });*/

  /*多行溢出*/
  /*$(".p-txt-box .p-detail").each(function() {
    if ($(this).text().length > 20) {
      $(this).html($(this).text().replace(/\s+/g, "").substr(0, 20) + "...")
    }
  })*/
</script>
</body>
</html>
